<template>
  <div class="order-list">
    <order-header title="订单列表">
      <template v-slot:tip>
        <span>请谨防钓鱼链接或诈骗电话，了解更多></span>
      </template>
    </order-header>

    <div class="wrapper">
      <div class="container">
        <el-tabs @tab-click="handleClick" v-model="activeName">
          <!--待付款-->
          <el-tab-pane name="waitForPay">
            <span slot="label"><i class="el-icon-bank-card"></i> 待付款</span>
            <div class="order-box">
              <loading v-if="loading"></loading>
              <!--订单列表-->
              <div class="order" v-for="(order,index) in list" :key="index">
                  <div class="order-title">
                    <div class="item-info fl">
                      <!--订单创建时间-->
                      {{order.createTime | formatCreateTime}}
                      <span></span>
                      <!--收货人姓名-->
                      {{order.receiverName}}
                      <span></span>
                      订单号：{{order.orderSn}}
                      <span>| 总额:</span>
                      {{order.totalAmount}}
                      <span>| 订单状态:</span>
                      <span v-if="order.status === 0">
                      待付款
                    </span>
                      <span v-else-if="order.status === 1">
                      待发货
                    </span>
                      <span v-else-if="order.status === 2">
                      待收货
                    </span>
                      <span v-else-if="order.status === 3">
                      待评价
                    </span>
                      <span v-else-if="order.status === 4">
                      已完成
                    </span>
                      <span v-else-if="order.status === 5">
                      已关闭
                    </span>
                      <span v-else>
                      未知状态
                    </span>
                    </div>
                    <div class="item-money fr">
                      <span>应付金额：</span>
                      <span class="money">{{order.payAmount}}</span>
                      <span>元</span>
                    </div>
                  </div>
                  <!--商品相关信息-->
                  <div class="order-content clearfix">
                    <a target="_blank" @click="getOrderInfo(order)">
                      <div class="good-box fl">
                        <div class="good-list" v-for="(item,i) in order.orderItemList" :key="i">
                          <div class="good-img">
                            <!--商品图片-->
                            <img v-lazy="item.productPic" alt="">
                          </div>
                          <div class="good-name" style="margin-left: 15px">
                            <!--商品名称-->
                            <div class="p-name">{{item.productName}}</div>
                          </div>
                          <div class="good-name" style="margin-left: 30px;font-family: 'Droid Sans Mono Dotted'">
                            <!--商品价格+商品的数量-->
                            <div class="p-money" style="color: #7ECF68">{{item.productPrice + 'x' + item.productQuantity}}元</div>
                            <!--商品规格-->
                            <div style="color: #665e57;font-size: small">
                              规格：{{item.sp1+ ' ' + (item.sp2==null ? ' ':item.sp2)+ ' ' + (item.sp3==null ?
                              '':''+item.sp3)}}
                            </div>
                          </div>
                        </div>
                      </div>
                    </a>
                      <div class="good-state fr" v-if="order.status == 0">
                        <el-button type="info" round href="javascript:;" @click="cancelOrder(order.id)">取消订单</el-button>
                        <el-button type="success" round href="javascript:;" @click="goPay(order.id)">去支付</el-button>
                      </div>
                    </div>

              </div>
              <!--分页-->
              <el-pagination
                      v-if="true"
                      class="pagination"
                      background
                      layout="total,prev, pager, next"
                      :pageSize="pageSize"
                      :total="total"
                      @current-change="handleChange1"
              >
              </el-pagination>

              <div class="load-more" v-if="false">
                <el-button type="primary" :loading="loading" @click="loadMore">加载更多</el-button>
              </div>
              <div class="scroll-more"
                   v-infinite-scroll="scrollMore"
                   infinite-scroll-disabled="true"
                   infinite-scroll-distance="410"
                   v-if="false">
                <img src="/imgs/loading-svg/loading-spinning-bubbles.svg" alt="" v-show="loading">
              </div>
              <no-data v-if="!loading && list.length==0"></no-data>
            </div>
          </el-tab-pane>
          <!--待发货-->
          <el-tab-pane name="waitForDeliver">
            <span slot="label"><i class="el-icon-loading"></i> 待发货</span>
            <div class="order-box">
              <loading v-if="loading"></loading>
              <!--订单列表-->
              <div class="order" v-for="(order,index) in list" :key="index">
                <!--订单相关信息-->
                <div class="order-title">
                  <div class="item-info fl">
                    <!--订单创建时间-->
                    {{order.createTime | formatCreateTime}}
                    <span></span>
                    <!--收货人姓名-->
                    {{order.receiverName}}
                    <span></span>
                    订单号：{{order.orderSn}}
                    <span>| 总额:</span>
                    {{order.totalAmount}}
                    <span>| 订单状态:</span>
                    <span v-if="order.status === 0">
                      待付款
                    </span>
                    <span v-else-if="order.status === 1">
                      待发货
                    </span>
                    <span v-else-if="order.status === 2">
                      待收货
                    </span>
                    <span v-else-if="order.status === 3">
                      待评价
                    </span>
                    <span v-else-if="order.status === 4">
                      已完成
                    </span>
                    <span v-else-if="order.status === 5">
                      已关闭
                    </span>
                    <span v-else>
                      未知状态
                    </span>
                  </div>
                  <div class="item-money fr">
                    <span>已付金额：</span>
                    <span class="money">{{order.payAmount}}</span>
                    <span>元</span>
                  </div>
                </div>
                <!--商品相关信息-->
                <div class="order-content clearfix">
                  <div class="good-box fl">
                    <div class="good-list" v-for="(item,i) in order.orderItemList" :key="i">
                      <div class="good-img">
                        <!--商品图片-->
                        <img v-lazy="item.productPic" alt="">
                      </div>
                      <div class="good-name" style="margin-left: 15px">
                        <!--商品名称-->
                        <div class="p-name">{{item.productName}}</div>
                      </div>
                      <div class="good-name" style="margin-left: 30px;font-family: 'Droid Sans Mono Dotted'">
                        <!--商品价格+商品的数量-->
                        <div class="p-money" style="color: #7ECF68">{{item.productPrice + 'x' + item.productQuantity}}元</div>
                        <!--商品规格-->
                        <div style="color: #665e57;font-size: small">
                          规格：{{item.sp1+ ' ' + (item.sp2==null ? ' ':item.sp2)+ ' ' + (item.sp3==null ?
                          '':''+item.sp3)}}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="good-state fr" v-if="order.status != 2">
                    <!--TODO 这里买家已付款，如果要退货，则涉及到商家的退款操作，后面实现-->
                    <!--<a href="javascript:;" style="font-size: small" @click="cancelOrderOrderPay(order.id)">取消订单 </a>-->
                    <el-button type="info" round style="font-size: small" @click="cancelOrderOrderPay(order.id)">取消订单</el-button>
                  </div>
                </div>
              </div>
              <el-pagination
                      v-if="true"
                      class="pagination"
                      background
                      layout="sizes,prev, pager, next"
                      :pageSize="pageSize"
                      :total="total"
                      @current-change="handleChange2"
              >
              </el-pagination>
              <div class="load-more" v-if="false">
                <el-button type="primary" :loading="loading" @click="loadMore">加载更多</el-button>
              </div>
              <div class="scroll-more"
                   v-infinite-scroll="scrollMore"
                   infinite-scroll-disabled="true"
                   infinite-scroll-distance="410"
                   v-if="false">
                <img src="/imgs/loading-svg/loading-spinning-bubbles.svg" alt="" v-show="loading">
              </div>
              <no-data v-if="!loading && list.length==0"></no-data>
            </div>
          </el-tab-pane>
          <!--待收货-->
          <el-tab-pane name="waitForReceive">
            <span slot="label"><i class="el-icon-truck"></i> 待收货</span>
            <div class="order-box">
              <loading v-if="loading"></loading>
              <!--订单列表-->
              <div class="order" v-for="(order,index) in list" :key="index">
                <div class="order-title">
                  <div class="item-info fl">
                    <!--订单创建时间-->
                    {{order.createTime | formatCreateTime}}
                    <span></span>
                    <!--收货人姓名-->
                    {{order.receiverName}}
                    <span></span>
                    订单号：{{order.orderSn}}
                    <span>| 总额:</span>
                    {{order.totalAmount}}
                    <span>| 订单状态:</span>
                    <span v-if="order.status === 0">
                      待付款
                    </span>
                    <span v-else-if="order.status === 1">
                      代发货
                    </span>
                    <span v-else-if="order.status === 2">
                      已发货
                    </span>
                    <span v-else-if="order.status === 3">
                      已完成
                    </span>
                    <span v-else-if="order.status === 4">
                      已关闭
                    </span>
                    <span v-else>
                      未知状态
                    </span>
                  </div>
                  <div class="item-money fr">
                    <span>已付金额：</span>
                    <span class="money">{{order.payAmount}}</span>
                    <span>元</span>
                  </div>
                </div>
                <!--商品相关信息-->
                <div class="order-content clearfix">
                  <div class="good-box fl">
                    <div class="good-list" v-for="(item,i) in order.orderItemList" :key="i">
                      <div class="good-img">
                        <!--商品图片-->
                        <img v-lazy="item.productPic" alt="">
                      </div>
                      <div class="good-name" style="margin-left: 15px">
                        <!--商品名称-->
                        <div class="p-name">{{item.productName}}</div>
                      </div>
                      <div class="good-name" style="margin-left: 30px;font-family: 'Droid Sans Mono Dotted'">
                        <!--商品价格+商品的数量-->
                        <div class="p-money" style="color: #7ECF68">{{item.productPrice + 'x' + item.productQuantity}}元</div>
                        <div style="color: #665e57;font-size: small">
                          规格：{{item.sp1+ ' ' + (item.sp2==null ? ' ':item.sp2)+ ' ' + (item.sp3==null ?
                          '':''+item.sp3)}}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="good-state fr" v-if="order.status == 2">
                    <el-button type="success" style="width: 100px" round href="javascript:;"
                               @click="watchExpress(order)">查看物流
                    </el-button>
                    <!--<a href="javascript:;" @click="confirmReceive(order.id)">确认收货</a>-->
                    <el-button type="warning" round href="javascript:;" @click="confirmReceive(order.id)">确认收货</el-button>
                  </div>
                </div>
              </div>
              <el-pagination
                      v-if="true"
                      class="pagination"
                      background
                      layout="prev, pager, next"
                      :pageSize="pageSize"
                      :total="total"
                      @current-change="handleChange3"
              >
              </el-pagination>
              <div class="load-more" v-if="false">
                <el-button type="primary" :loading="loading" @click="loadMore">加载更多</el-button>
              </div>
              <div class="scroll-more"
                   v-infinite-scroll="scrollMore"
                   infinite-scroll-disabled="true"
                   infinite-scroll-distance="410"
                   v-if="false">
                <img src="/imgs/loading-svg/loading-spinning-bubbles.svg" alt="" v-show="loading">
              </div>
              <no-data v-if="!loading && list.length==0"></no-data>
            </div>
          </el-tab-pane>
          <!--待评价-->
          <el-tab-pane name="waitComment">
            <span slot="label"><i class="el-icon-edit-outline"></i>待评价</span>
            <div class="order-box">
              <loading v-if="loading"></loading>
              <!--订单列表-->
              <div class="order" v-for="(order,index) in list" :key="index">
                <div class="order-title">
                  <div class="item-info fl">
                    <!--订单创建时间-->
                    {{order.createTime | formatCreateTime}}
                    <span></span>
                    <!--收货人姓名-->
                    {{order.receiverName}}
                    <span></span>
                    订单号：{{order.orderSn}}
                    <span>| 总额:</span>
                    {{order.totalAmount}}
                    <span>| 订单状态:</span>
                    <span v-if="order.status === 0">
                      待付款
                    </span>
                    <span v-else-if="order.status === 1">
                      待发货
                    </span>
                    <span v-else-if="order.status === 2">
                      待收货
                    </span>
                    <span v-else-if="order.status === 3">
                      待评价
                    </span>
                    <span v-else-if="order.status === 4">
                      已完成
                    </span>
                    <span v-else-if="order.status === 5">
                      已关闭
                    </span>
                    <span v-else>
                      未知状态
                    </span>
                  </div>
                  <div class="item-money fr">
                    <span>已付金额：</span>
                    <span class="money">{{order.payAmount}}</span>
                    <span>元</span>
                  </div>
                </div>
                <!--商品相关信息-->
                <div class="order-content clearfix">
                  <div class="good-box fl">
                    <div class="good-list" v-for="(item,i) in order.orderItemList" :key="i">
                      <div class="good-img">
                        <!--商品图片-->
                        <img v-lazy="item.productPic" alt="">
                      </div>
                      <div class="good-name" style="margin-left: 15px">
                        <!--商品名称-->
                        <div class="p-name">{{item.productName}}</div>
                      </div>
                      <div class="good-name" style="margin-left: 30px;font-family: 'Droid Sans Mono Dotted'">
                        <!--商品价格+商品的数量-->
                        <div class="p-money" style="color: #7ECF68">{{item.productPrice + 'x' + item.productQuantity}}元</div>
                        <div style="color: #665e57;font-size: small">
                          规格：{{item.sp1+ ' ' + (item.sp2==null ? ' ':item.sp2)+ ' ' + (item.sp3==null ?
                          '':''+item.sp3)}}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="good-state fr" v-if="order.status == 3">
                    <el-button type="info" style="width: 100px" round href="javascript:;"
                               @click="watchExpress(order)">查看物流
                    </el-button>
                    <!--立即评价（涉及的点：一个订单可能有多个商品，因此需提供对各个商品进行分别评价）-->
                    <el-button v-if="order.status===3" type="success" style="width: 100px" round href="javascript:;"
                               @click="commentProduct(order.id)">立即评价
                    </el-button>
                  </div>
                </div>
              </div>
              <el-pagination
                      v-if="true"
                      class="pagination"
                      background
                      layout="prev, pager, next"
                      :pageSize="pageSize"
                      :total="total"
                      @current-change="handleChange3"
              >
              </el-pagination>
              <div class="load-more" v-if="false">
                <el-button type="primary" :loading="loading" @click="loadMore">加载更多</el-button>
              </div>
              <div class="scroll-more"
                   v-infinite-scroll="scrollMore"
                   infinite-scroll-disabled="true"
                   infinite-scroll-distance="410"
                   v-if="false">
                <img src="/imgs/loading-svg/loading-spinning-bubbles.svg" alt="" v-show="loading">
              </div>
              <no-data v-if="!loading && list.length==0"></no-data>
            </div>
          </el-tab-pane>
          <!--已完成 status=4-->
          <el-tab-pane name="finish">
            <span slot="label"><i class="el-icon-circle-check"></i>已完成</span>
            <div class="order-box">
              <loading v-if="loading"></loading>
              <!--订单列表-->
              <div class="order" v-for="(order,index) in list" :key="index">
                <div class="order-title">
                  <div class="item-info fl">
                    <!--订单创建时间-->
                    {{order.createTime | formatCreateTime}}
                    <span></span>
                    <!--收货人姓名-->
                    {{order.receiverName}}
                    <span></span>
                    订单号：{{order.orderSn}}
                    <span>| 总额:</span>
                    {{order.totalAmount}}
                    <span>| 订单状态:</span>
                    <span v-if="order.status === 0">
                      待付款
                    </span>
                    <span v-else-if="order.status === 1">
                      待发货
                    </span>
                    <span v-else-if="order.status === 2">
                      待收货
                    </span>
                    <span v-else-if="order.status === 3">
                      待评价
                    </span>
                    <span v-else-if="order.status === 4">
                      已完成
                    </span>
                    <span v-else-if="order.status === 5">
                      已关闭
                    </span>
                    <span v-else>
                      未知状态
                    </span>
                  </div>
                  <div class="item-money fr">
                    <span>已付金额：</span>
                    <span class="money">{{order.payAmount}}</span>
                    <span>元</span>
                  </div>
                </div>
                <!--商品相关信息-->
                <div class="order-content clearfix">
                  <div class="good-box fl">
                    <div class="good-list" v-for="(item,i) in order.orderItemList" :key="i">
                      <div class="good-img">
                        <!--商品图片-->
                        <img v-lazy="item.productPic" alt="">
                      </div>
                      <div class="good-name" style="margin-left: 15px">
                        <!--商品名称-->
                        <div class="p-name">{{item.productName}}</div>
                      </div>
                      <div class="good-name" style="margin-left: 30px;font-family: 'Droid Sans Mono Dotted'">
                        <!--商品价格+商品的数量-->
                        <div class="p-money" style="color: #7ECF68">{{item.productPrice + 'x' + item.productQuantity}}元</div>
                        <div style="color: #665e57;font-size: small">
                          规格：{{item.sp1+ ' ' + (item.sp2==null ? ' ':item.sp2)+ ' ' + (item.sp3==null ?
                          '':''+item.sp3)}}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="good-state fr" v-if="order.status == 3">
                    <el-button type="info" style="width: 100px" round href="javascript:;"
                               @click="watchExpress(order)">查看物流
                    </el-button>
                  </div>
                </div>
              </div>
              <el-pagination
                      v-if="true"
                      class="pagination"
                      background
                      layout="prev, pager, next"
                      :pageSize="pageSize"
                      :total="total"
                      @current-change="handleChange3"
              >
              </el-pagination>
              <div class="load-more" v-if="false">
                <el-button type="primary" :loading="loading" @click="loadMore">加载更多</el-button>
              </div>
              <div class="scroll-more"
                   v-infinite-scroll="scrollMore"
                   infinite-scroll-disabled="true"
                   infinite-scroll-distance="410"
                   v-if="false">
                <img src="/imgs/loading-svg/loading-spinning-bubbles.svg" alt="" v-show="loading">
              </div>
              <no-data v-if="!loading && list.length==0"></no-data>
            </div>
          </el-tab-pane>
          <!--历史订单 5（已关闭订单）-->
          <el-tab-pane name="close">
            <span slot="label"><i class="el-icon-date"></i> 历史订单</span>
            <div class="order-box">
              <loading v-if="loading"></loading>
              <!--订单列表-->
              <div class="order" v-for="(order,index) in list" :key="index">
                <div class="order-title">
                  <div class="item-info fl">
                    <!--订单创建时间-->
                    {{order.createTime | formatCreateTime}}
                    <span></span>
                    <!--收货人姓名-->
                    {{order.receiverName}}
                    <span></span>
                    订单号：{{order.orderSn}}
                    <span>| 总额:</span>
                    {{order.totalAmount}}
                    <span>| 订单状态:</span>
                    <span v-if="order.status === 0">
                      待付款
                    </span>
                    <span v-else-if="order.status === 1">
                      待发货
                    </span>
                    <span v-else-if="order.status === 2">
                      待收货
                    </span>
                    <span v-else-if="order.status === 3">
                      待评价
                    </span>
                    <span v-else-if="order.status === 4">
                      已完成
                    </span>
                    <span v-else-if="order.status === 5">
                      已关闭
                    </span>
                    <span v-else>
                      未知状态
                    </span>
                  </div>
                  <div class="item-money fr">
                    <span>应付金额：</span>
                    <span class="money">{{order.payAmount}}</span>
                    <span>元</span>
                  </div>
                </div>
                <!--商品相关信息-->
                <div class="order-content clearfix">
                  <div class="good-box fl">
                    <div class="good-list" v-for="(item,i) in order.orderItemList" :key="i">
                      <div class="good-img">
                        <!--商品图片-->
                        <img v-lazy="item.productPic" alt="">
                      </div>
                      <div class="good-name" style="margin-left: 15px">
                        <!--商品名称-->
                        <div class="p-name">{{item.productName}}</div>
                      </div>
                      <div class="good-name" style="margin-left: 30px;font-family: 'Droid Sans Mono Dotted'">
                        <!--商品价格+商品的数量-->
                        <div class="p-money" style="color: #7ECF68">{{item.productPrice + 'x' + item.productQuantity}}元</div>
                        <!--商品规格-->
                        <div style="color: #665e57;font-size: small">
                          规格：{{item.sp1+ ' ' + (item.sp2==null ? ' ':item.sp2)+ ' ' + (item.sp3==null ?
                          '':''+item.sp3)}}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="good-state fr" v-if="(order.status == 4) || (order.status == 5)">

                    <el-button type="danger" style="font-size: small;display: flex;margin-right: 10px;" round
                               href="javascript:;"
                               @click="deleteOrder(order.id)">删除订单
                    </el-button>
                  </div>
                </div>
              </div>
              <el-pagination
                      v-if="true"
                      class="pagination"
                      background
                      layout="total,prev, pager, next"
                      :pageSize="pageSize"
                      :current-page.sync="pageNum"
                      :total="total"
                      @current-change="handleChange4"
              >
              </el-pagination>
              <div class="load-more" v-if="false">
                <el-button type="primary" :loading="loading" @click="loadMore">加载更多</el-button>
              </div>
              <div class="scroll-more"
                   v-infinite-scroll="scrollMore"
                   infinite-scroll-disabled="true"
                   infinite-scroll-distance="410"
                   v-if="false">
                <img src="/imgs/loading-svg/loading-spinning-bubbles.svg" alt="" v-show="loading">
              </div>
              <no-data v-if="!loading && list.length==0"></no-data>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--订单详情表弹出框-->
    <el-dialog
            title="订单详情"
            :visible.sync="diaLogVisible"
            width="50%"
            center>

    </el-dialog>

    <!--物流信息-->
    <el-dialog title="物流信息"
               :visible.sync="expressDiaVisible"
               :before-close="handleClose"
               v-loading="dLoading"
               element-loading-text="拼命加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)"
               width="50%">
        <h3>物流公司：{{delivery_company}}</h3>
      <el-steps direction="vertical"
                :active="1"
                finish-status="success"
                space="50px">
        <el-step  v-for="item in logisticsList"
                  :key="item.context"
                  :title="item.context"
                  :description="item.time"></el-step>
      </el-steps>
    </el-dialog>

    <!--商品评价弹出框(多个商品如何联动评价，如何绑定)-->
    <el-dialog title="评价"
               :visible.sync="commentDiaVisible"
               :before-close="handleCloseComment"
               width="50%">
          <div>
            <el-card shadow="never" style="margin-top: 20px;" v-for="(item,index) in productList" :key="index">
              <el-form label-width="140px" size="small">
                <!--待评价商品信息-->
                <el-form-item label="商品信息">
                  <div style="display: flex;position: relative;">
                    <!--商品图片-->
                    <img style="width: 175px;height: 130px" :src="item.productPic">
                    <!--名称、所购买的属性、价格-->
                    <div style="margin-left: 20px">
                      <h3>{{item.productName}}</h3>
                      <h4 style="color: #999999">规格：{{(item.sp1!=null?item.sp1:'')+(item.sp2!=null?item.sp2:'')+(item
                        .sp3!=null?item.sp3:'')}}</h4>
                      <h4 style="color: #80c58a">单价￥：{{item.productPrice}}</h4>
                      <h4 style="color: #999999">购买数量：{{item.productQuantity}}</h4>
                    </div>
                  </div>

                </el-form-item>
                <el-form-item label="商品评价" prop="start">
                  <el-rate v-model="start" show-text></el-rate>
                </el-form-item>
                <el-form-item label="评价" prop="content">
                  <el-input v-model="content" show-word-limit class="input-width"
                            placeholder="请输入内容"  type="textarea"></el-input>
                </el-form-item>
              </el-form >
            </el-card>
            <div style="display: flex;justify-content: center;margin-top: 20px">
              <el-button type="info" @click="commentDiaVisible = false">取 消</el-button>
              <el-button type="success"  @click="comfirmComment">确 定</el-button>
            </div>
          </div>


    </el-dialog>

  </div>
</template>
<script>
  import OrderHeader from './../components/OrderHeader'
  import Loading from './../components/Loading'
  import NoData from './../components/NoData'
  import { Pagination,Button } from 'element-ui'
  import infiniteScroll from 'vue-infinite-scroll'
  import Qs from 'qs'
  import {formatDate} from '@/util/date';
  export default{
    name:'order-list',
    components:{
      OrderHeader,
      Loading,
      NoData,
      [Pagination.name]:Pagination,
      [Button.name]:Button
    },
    directives: {
      infiniteScroll
    },
    data(){
      return {

        comment:{
        },
        start:null,
        productList:[],//订单中待评价商品列表
        content:'',//评价内容
        commentDiaVisible:false,
        delivery_company:null,
        expressDiaVisible:false,
        logisticsList:null,
        diaLogVisible:false,
        activeName: "waitForPay",
        loading:false,
        dLoading:false,
        list:[],
        historyOrderList: [],
        pageNum: 1,
        pageSize: 5,
        total:0,
        showNextPage:true,//加载更多：是否显示按钮
        busy:false,//滚动加载，是否触发
        commentOrder:null,
      }
    },
    filters:{
      formatCreateTime(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      },
    },
    mounted(){
      this.getOrderList(0);
      //alert(this.$route.query.status)
      //this.getOrderList(this.$route.query.status)
    },
    methods:{
      //确定提交评论
      comfirmComment(){
        var params = new URLSearchParams();
        params.append("oiId",this.productList[0].id);
        params.append("content",this.content);
        params.append("start",this.start);
        this.axios.post('/comment/commitComent',params).then(response=>{
          if(response){
            this.$message.success("评论成功");
            this.commentDiaVisible=false;
          }
          this.getOrderList(3);
        })
      },

      //立即评价
      commentProduct(orderId){

        //alert("商品评价模块，程序员小哥哥还在开发中")
        //根据订单id，从oms_order_item表中获取对应的商品id，然后将评价内容+商品id+商品对应的sku信息+评价星数等记录保存到pms_comment商品评论表中
       /* this.axios.get(`/order/orderDetail?orderId=${orderId}`).then(response=>{
          this.productList=response.orderItemList;
        })*/
        //查询订单中对应未评价的商品
        this.axios.get(`/comment/waitComment?orderId=${orderId}`).then(response=>{
            this.productList=response;
            if(this.productList.length!=0){
              this.commentDiaVisible=true;
            }else{
              this.$message.info("该商品已经评价过了")
            }
        })
      },

      handleCloseComment(){
        this.commentDiaVisible=false;
      },

      handleClose(){
        this.expressDiaVisible=false;
      },

      //查看物流
      watchExpress(row){
        this.expressDiaVisible=true;
        this.dLoading=true;
        //请求参数
        var params={
          com: "auto",
          nu: row.deliverySn,
          receiverPhone: row.receiverPhone,
          senderPhone: null
        }

        //请求物流信息
        this.axios.post('/express/getExpressInfo',params).then(response=>{
          if(response){
            this.dLoading=false;
            //将方法的数据列表倒置
            this.logisticsList=response.showapi_res_body.data;
            this.delivery_company=response.showapi_res_body.expTextName;
          }
        })
      },


      //获取订单详情
      getOrderInfo(data){
        this.diaLogVisible=true;

      },

      //删除订单
      deleteOrder(orderId){
        this.$confirm('是否要删除该订单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.axios.delete('/order/delete',{
            params:{
              oId:orderId
            }}
            ).then(response=>{
            if (response) {
              this.$message({
                type: 'success',
                message: '删除订单成功!'
              })
              this.getOrderList(4);
            }
          })

        });
      },

      //TODO 已付款的情况下取消订单
      cancelOrderOrderPay(orderId){
        alert("程序员小哥哥正在抓紧开发中.....")
      },

      //TODO 确认收货
      confirmReceive(orderId){
        this.$confirm('是否已确认收到该商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res=>{
          //根据物流信息判断用户是否已经收货（避免用户主观错误）
          //根据订单号修改订单状态。“待收货”--->“待评价”
          this.axios.put(`/order/confirmReceive?orderId=${orderId}`).then(response=>{
            if(response=='确认收货成功'){
              this.$message({
                type: 'success',
                message: '确认收货成功!'
              })
              //刷新页面(重新获取待收货订单)
              this.getOrderList(2);

            }else{
              this.$message({
                type: 'error',
                message: '确认收货失败!'
              })
            }
          })
        })
      },

      //选中查看订单的类型
      handleClick() {
        if(this.activeName==="waitForPay"){
         this.getOrderList(0);
          //待支付订单
        }else if(this.activeName==="waitForDeliver"){
          //待发货订单
          this.getOrderList(1);
        }else if(this.activeName==="waitForReceive"){
          //待收货订单
          this.getOrderList(2);
        }else if(this.activeName==="waitComment"){
          //待评价订单
          this.getOrderList(3);
        } else if(this.activeName==="finish"){
          this.getOrderList(4);
        }else{
          //已关闭订单
          this.getOrderList(5);
        }
      },

      //获取当前用户的订单列表
      getOrderList(status){
        this.loading = true;
        this.busy = true;
        this.axios.post('/order/list/userOrder',Qs.stringify({ 
            pageSize:5,
            pageNum:this.pageNum,
            status: status
        }),{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then((res)=>{
          this.loading = false;
          this.list = res.records;
          this.total = res.total;
          this.showNextPage = res.hasNextPage;
          this.busy = false;
        }).catch(()=>{
          this.loading = false;
        })
      },
      //支付订单
      goPay(orderId){
        // 三种路由跳转方式
        // this.$router.push('/order/pay')
        /*this.$router.push({
          name:'order-pay',
          query:{
            orderNo
          }
        })*/
        this.$router.push({
          path:'/order/pay',
          query:{
            orderId
          }
        })
      },
      //取消订单
      cancelOrder(orderId){
        //取消前确认一下
        this.$confirm('是否要取消该订单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.axios.delete('/order/cancel',{
            params:{
              oId:orderId
            }
          }).then(response=>{
            if(response){
              this.$message({
                type: 'success',
                message: '取消订单成功!'
              })
            }
            //刷新列表
            this.getOrderList();
          })
        })


      },
      // 第一种方法：分页器
      handleChange4(pageNum){
        this.pageNum = pageNum;
        this.getOrderList(4);
      },

      handleChange1(pageNum){
        this.pageNum = pageNum;
        this.getOrderList(0);
      },

      handleChange2(pageNum){
        this.pageNum = pageNum;
        this.getOrderList(1);
      },
      handleChange3(pageNum){

        this.pageNum = pageNum;
        this.getOrderList(2);
      },


      // 第二种方法：加载更多按钮
      loadMore(){
        this.pageNum++;
        this.getOrderList();
      },
      // 第三种方法：滚动加载，通过npm插件实现
      scrollMore(){
        this.busy = true;
        setTimeout(()=>{
          this.pageNum++;
          this.getList();
        },500);
      },
      // 专门给scrollMore使用
      getList(){
        this.loading = true;
        this.axios.get('/orders',{
          params:{
            pageSize:10,
            pageNum:this.pageNum
          }
        }).then((res)=>{
          this.list = this.list.concat(res.list);
          this.loading = false;
          if(res.hasNextPage){
            this.busy=false;
          }else{
            this.busy=true;
          }
        });
      },
    }
  }
</script>
<style lang="scss">
  @import './../assets/scss/config.scss';
  @import './../assets/scss/mixin.scss';
  .order-list{
    .wrapper{
      background-color:$colorJ;
      border-radius: 5px;
      padding-top:33px;
      padding-bottom:110px;
      .order-box{
        .order{
          @include border();
          background-color:$colorG;
          margin-bottom:30px;
          &:last-child{
            margin-bottom:0;
          }

          .order-title{
            @include height(74px);
            background-color:$colorK;
            padding:0 43px;
            font-size:16px;
            color:$colorC;
            .item-info{
              span{
                margin:0 9px;
              }
            }
            .money{
              font-size:26px;
              color:$colorB;
            }
          }
          .order-content{
            padding:0 43px;
            .good-box{
              width:81%;
              .good-list{
                display: flex;
                align-items: center;
                height:145px;
                .good-img{
                  width:125px;
                  img{
                    width:100%;
                  }
                }
                .good-name{
                  font-size:20px;
                  color:$colorB;
                }
              }
            }
            .good-state{
              @include height(145px);
              font-size: 20px;
              color:#7ECF68;
              a{
                color:#7ECF68;
              }
            }
          }
        }

        .order:hover{
          border: 2px solid #80c58a;
          border-radius: 5px;
        }
        .pagination{
          text-align:right;
        }
        .el-pagination.is-background .el-pager li:not(.disabled).active{
          background-color: #7ECF68;
        }
        .el-button--primary{
          background-color: #7ECF68;
          border-color: #7ECF68;
        }
        .load-more,.scroll-more{
          text-align:center;
        }
      }

    }
  }
</style>